<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
</ul>

<script>
// Set是ES6中的一种新的数据结构
// Set是一个构造函数，用于创建Set对象
// Set类似于数组，Set中的元素是唯一的，不能重复（会自动去重）
// 创建Set对象时，可以传入一个数组或类数组，或不传任何参数

/* // 创建set对象
let s1 = new Set();
console.log( s1 );// Set(0) {size: 0}
console.log( typeof s1 );// 'object'
 
let arr = ['a1','a2','a3','a4'];
let s2 = new Set(arr);
console.log( s2 );// Set(4) {'a1', 'a2', 'a3', 'a4'}

let lis = document.querySelectorAll('.list li');
let s3 = new Set(lis);
console.log( s3 );// Set(4) {li, li, li, li} */


// 操作Set：
let s4 = new Set(['a1','a2','a3','a4']);
// console.log( s4.size );// 4 元素个数
// s4.add('a5');// 向set中添加一个值
// s4.delete('a2');// 删除set中的一个值
console.log(s4.delete('a2'));
// console.log( s4.has('a2') );// false 判断是否有某个值
// console.log( s4.has('a3') );// true 判断是否有某个值
// s4.clear();// 清空所有数据
// console.log( s4 );

// 不能通过索引访问某值
// console.log( s4[0] );// undefined
// console.log( s4[2] );// undefined

// 遍历set数据
// s4.forEach((item)=>{
//     console.log( item );// 'a1'  'a2'  'a3'  'a4'
// })

// ES6提供了 for/of 遍历方法
// for/of可以遍历 字符串、数组、类数组、Set、Map 等数据
// for (let val of s4){
//     console.log( val );// 'a1'  'a2'  'a3'  'a4'
// }

// console.log( ...s4 );// a1 a2 a3 a4
// console.log( 'a1','a2','a3','a4' );// a1 a2 a3 a4

let arr1 = [12,22,15,32,22,12,62];
// 使用一行代码对数组进行去重？
// console.log( [...new Set(arr1)] );// [12, 22, 15, 32, 62]

</script>
</body>
</html>